<template>
	<view class="index">
		<!-- https://gitee.com/flexming/dcloud_goods_list.git -->
		<view class="index-title">
			<text>为您推荐</text>
			<image v-if="!isgrid" @click="isgrid=!isgrid" src="../../static/51.png" mode=""></image>
			<image v-else @click="isgrid=!isgrid" src="../../static/50.png" mode=""></image>
		</view>
		
		<view class="index-list">
			<!-- 列表 -->
			<view class="index-list-box1" v-if="!isgrid">
				<block v-for="(item,i) in goodsArr" :key="i">
					<itemList :item="item"></itemList>
				</block>
			</view>
			<!-- 兩宮格 -->
			<view class="index-list-box2" v-if="isgrid">
				<block v-for="(item,i) in goodsArr" :key="i">
					<gridList :item="item"></gridList>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import gridList from "./gridList.vue"
	import itemList from "./itemList.vue"
	export default {
		components: {
			gridList,
			itemList
		},
		data() {
			return {
				isgrid: false,
				goodsArr: [{
						name: "森马集团GENIOLAMODE短袖t恤男2023新款潮青少年宽松黑色纯棉上衣",
						tag: '自营,手机,华为',
						storeName: "绿生商店"
					},
					{
						name: "皓顿/简约阔腿休闲短裤男夏季美式cityboy直筒休闲裤宽松大码裤子",
						tag: '非自营,IPAD,IPHONE',
						storeName: "金海岸江商店"
					},
					{
						name: "ADO/爱都男士短裤速干透气夏季五分裤男休闲运动加肥加大沙滩裤",
						tag: 'News',
						storeName: "贝姿百货"
					},
					{
						name: "红蜻蜓网眼提花冰丝套装男夏季新款男士圆领t恤长裤运动两件套",
						storeName: "佳利和商店",
						tag: '',
					},
					{
						name: "BEADYFUN 潮流套头印花五分袖t恤男夏季新款宽松休闲圆领学生短",
						storeName: "新东正百货",
						tag: '',
					},
					{
						name: "森马集团GENIO LAMODE水洗牛仔裤男春秋款ins美式高街时尚长裤",
						storeName: "春天商店",
						tag: '',
					},
					{
						name: "森马集团GENIOLAMODE男士短袖t恤2023新款上衣服夏季潮流半",
						storeName: "车前商店",
						tag: '',
					},
					{
						name: "回力夏季空调长裤男士休闲裤子黑色大码百搭束脚裤青少年运动卫裤",
						storeName: "宏达商店",
						tag: '',
					},
					{
						name: "NOME纯棉短袖套装夏季男短袖宽松五分袖纯棉T恤男女情侣短裤套",
						storeName: "鑫鑫百货",
						tag: '',
					},
					{
						name: "真维斯短裤男夏季新款运动冰丝外穿青少年ins薄款速干休闲五分裤",
						storeName: "好邻居便利店",
						tag: '',
					},
					{
						name: "PNJ冰丝宽松垂感黑色衬衫男长袖夏季高级感痞帅男士休闲男装衬衣",
						storeName: "新天空商店",
						tag: '',
					},
					{
						name: "回力冰丝防晒衣男夏季男款大码透气钓鱼户外男士连帽拉链情侣夹克",
						storeName: "太平洋百货",
						tag: '',
					},
					{
						name: "森马集团品牌GLM男士夏季薄款裤子垂感冰丝裤男式凉感运动速干裤",
						storeName: "明冠商店",
						tag: '',
					},
					{
						name: "森马集团品牌GLMPolo衫短袖男士夏季潮牌商务休闲翻领半袖t恤上衣",
						storeName: "联鸿商店",
						tag: '',
					},
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.index {
		width: 100%;
		padding-bottom: 20rpx;
		box-sizing: border-box;

		.index-list-box1 {
			width: 100%;
		}

		.index-list-box2 {
			width: 100%;
			padding: 0 24rpx;
			box-sizing: border-box;
		}

		.index-title {
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			
			padding: 0 24rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			z-index: 100;

			text {
				position: relative;
				font-size: 32rpx;
				font-weight: 700;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			text::after {
				content: '';
				width: 8rpx;
				height: 30rpx;
				position: absolute;
				left: 0;
				top: 8rpx;
				background-color: #333;
			}

			image {
				width: 35rpx;
				height: 35rpx;
			}
		}

	}
</style>